<template>
	<block v-if="tabbar.tabbar_type == 'business'">
		<view v-if="!tabbar.hidden" class="tabbar_box" :style="'background-color:' + tabbar.backgroundColor">
			<block v-for="(item, index) in tabbar.list" :key="index">
				<view v-if="!item.page_path" class="tabbar_nav" :style="'color:' + tabbar.color" @tap="goUrl($event)" :data-url="item.url" :data-title="item.name">
					<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.pic_path"></image>
					<text>{{item.name}}</text>
				</view>
				<block v-else>
					<block v-if="item.page_path != tabbar.nowPage">
						<view class="tabbar_nav" hover-class="none" :data-url="item.page_url" @tap="switchUrl($event)" :style="'color:' + tabbar.color">
							<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.pic_path"></image>
							<text>{{item.name}}</text>
						</view>
					</block>
					<block v-else>
						<view v-if="item.showTop" class="tabbar_nav" :style="'color:' + tabbar.selectedColor" @tap="returnTop">
							<text class=" iconfont icon-returnTop tabbar_icon"></text>
							<!-- <lang keywords="回到顶部"></lang> -->
						</view>
						<view v-else class="tabbar_nav" hover-class="none" :data-url="item.page_url" @tap="switchUrl($event)" :style="'color:' + tabbar.selectedColor">
							<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.hover_pic_path"></image>
							<text>{{item.name}}</text>
						</view>
					</block>
				</block>
			</block>
		</view>
	</block>
	<block v-else>
		<view v-if="!tabbar.hidden" class="tabbar_box" :style="'background-color:' + tabbar.backgroundColor">
			<block v-for="(item, index) in tabbar.list" :key="index">
				<view v-if="item.isSpecial" class="tabbar_nav" :style="'color:' + tabbar.color" @tap="goUrl($event)" :data-type="item.pageType"
				 :data-url="item.pagePath" :data-title="item.text" :data-index="index">
					<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.iconPath"></image>
					<text v-if="item.type == 0">{{item.text}}</text>
				</view>
				<block v-else>
					<block v-if="!item.selected">
						<navigator class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.color" open-type="switchTab">
							<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.iconPath"></image>
							<text v-if="item.type == 0">{{item.text}}</text>
						</navigator>
					</block>
					<block v-else>
						<view v-if="item.showTop" class="tabbar_nav" :style="'color:' + tabbar.selectedColor" @tap="returnTop">
							<text class=" iconfont icon-returnTop tabbar_icon"></text>
							<!-- <lang keywords="回到顶部"></lang> -->
						</view>
						<navigator v-else class="tabbar_nav" hover-class="none" :url="item.pagePath" :style="'color:' + tabbar.selectedColor"
						 open-type="switchTab">
							<image :class="'tabbar_icon ' + ( item.type == 1 ? 'big' : '' )" :src="item.selectedIconPath"></image>
							<text v-if="item.type == 0">{{item.text}}</text>
						</navigator>
					</block>
				</block>
			</block>
		</view>
	</block>
</template>

<script>
	const app = getApp();
	var common = require('../../utils/common.js');
	export default {
		name: 'tabbar',
		props: {
			tabbar: {
				type: Object,
				default: {}
			}
		},
		watch: {
			
		},
		data() {
			return {
				wxapp_type:''
			}
		},
		methods: {
			switchUrl(e){
				uni.redirectTo({
					url: e.currentTarget.dataset.url,
				})
			},
			goUrl(e) { 
				console.log('8888888888888888888888877')
				if (this.tabbar.list.length == 1) {
					if (e.currentTarget.dataset.type == 'page') {
						uni.redirectTo({
							url: '/pages/webview/tab_webview'
						});
					} else {
						app.globalData.tabWeb = {
							url: e.currentTarget.dataset.url,
							title: e.currentTarget.dataset.title
						};
						uni.switchTab({
							url: '/pages/webview/tab_webview'
						});
					}
					return;
				}
				var url = e.currentTarget.dataset.url;
				if (getCurrentPages()[0].route.indexOf('/village') !== -1) {
					const res = uni.getStorageSync("village_key");
					var village_id = res.village_id;
					var pigcms_id = res.pigcms_id;
					if (village_id) {
						url = common.changeURLArg(url, 'village_id', village_id);
					}
					if (pigcms_id) {
						url = common.changeURLArg(url, 'pigcms_id', pigcms_id);
					}
				}
				console.log('tabbar url', url);
				if (e.currentTarget.dataset.type == 'page') {
					
					uni.navigateTo({
						url: url
					})
				} else {
					common.parseUrl(url, '', false, e.currentTarget.dataset.title);
				}
			},

			returnTop() {
				this.$emit('returnTop', {
					returnTop: true
				})
			},
		}
	}
</script>
<style>
	.tabbar_box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999999999;
		width: 100%;
		box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
		height: 98rpx;
		height: calc(98rpx + constant(safe-area-inset-bottom));
		height: calc(98rpx + env(safe-area-inset-bottom));
		/* border-bottom: 1px solid red; */
	}

	.middle-wrapper {
		position: absolute;
		right: 310rpx;
		bottom: 0;
		background-color: #fff;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border-top: 2rpx solid #f2f2f3;
	}

	.middle-wrapper.iphoneX-height {
		bottom: 66rpx;
	}

	.tabbar_nav {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 20rpx;
		height: 98rpx;
		position: relative;
		justify-content: center;
		/* padding-top:3px; */
	}

	.tabbar_icon {
		width: 24px;
		height: 24px;
		line-height: 24px;
		text-align: center;
		margin-bottom: 2px;
	}

	.tabbar_icon.iconfont {
		font-size: 21px;
	}

	.tabbar_icon.big {
		width: 32px;
		height: 32px;
	}

	.special-wrapper {
		position: absolute;
		left: 77rpx;
		top: -36rpx;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		border-top: 2rpx solid #f2f2f3;
		background-color: #fff;
		text-align: center;
		box-sizing: border-box;
		padding: 6rpx;
	}

	.special-wrapper .tabbar_icon {
		width: 84rpx;
		height: 84rpx;
	}

	.special-text-wrapper {
		width: 56rpx;
		height: 56rpx;
	}

	/* @font-face {
		font-family: 'iconfont';
		src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot');
		src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff') format('woff'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.svg#iconfont') format('svg');
	} */
	
	
	@font-face {
		font-family: 'iconfont';
		/* project id 792293 */
		src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot');
		src: url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.eot?#iefix') format('embedded-opentype'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff2') format('woff2'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.woff') format('woff'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.ttf') format('truetype'),
			url('https://at.alicdn.com/t/font_792293_irmehlvoa5o.svg#iconfont') format('svg');
	}
	
	

	.iconfont {
		position: relative;
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	/* .icon-returnTop:before {
		content: "\e669";
	} */
	
	.icon-returnTop:after {
		position: absolute;
		top:-30%;
		left:50%;
		margin-left:-45upx;
		content:'';
		width:90upx;
		height:90upx;
		background:url('') no-repeat center;
		background-size: 70upx;
	}
	
</style>
